<template>
  <div class="list">
    <dl v-for="(v,i) in list" :key="i">
         <dt>
            <img :src="v.image" alt="">
         </dt>
         <dd>
           <h3 @click="$router.push(`/detail/${v.id}`)">{{v.title}}</h3>
           <p>{{v.content}}</p>
           <b>{{v.price}}元</b>
           <p>销量{{v.sales}}件</p>
           <p>
              <button @click="sub(v.id)">-</button>
              <span>1</span>
              <button>+</button>
           </p>
         </dd>
       </dl>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  async created() {
    let res = await axios("/api/shop/list");
    this.list = res.data.data.data;
    console.log(res);
  },
  methods:{
    sub(){

    }
  }
};
</script>
<style lang='scss'>
.list{
  width: 100%;
  height: 100%;
}
dl{
  width: 100%;
  height: 135px;
  display: flex;
  padding-left: 10px;
  align-items: center;
  border-bottom: 1px solid #eee;
  dt{
    flex:1;
    img{
      width: 100px;
      height: 100px;
    }
  }
  dd{
    flex: 2;
    button{
      width: 20px;
      margin: 0 5px;
      font-size: 16px;
    }
  }
}
</style>